<template>
    <div class="pull-container">
        <van-pull-refresh
            v-model="refreshing"
            @refresh="handleRefresh"
            :success-text="successText"
        >
            <van-list
                v-model="loading"
                :finished="finished"
                :finished-text="finishedText"
                :offset="offset"
                @load="getLoad"
            >
                <slot></slot>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
export default {
    props: {
        successText: {
            type: String,
            default: '刷新成功'
        },
        finishedText: {
            type: String,
            default: '没有更多了'
        },
        offset: {
            type: Number,
            default: 10
        }
    },
    data () {
        return {
            refreshing: false,
            loading: false,
            finished: false
        }
    },
    mounted () {

    },
    methods: {
        /* 下拉刷新 */
        handleRefresh () {
            this.$emit('refresh')
        },

        /* 上拉加载 */
        getLoad () {
            this.$emit('load')
        }
    }
}
</script>

<style lang="less" scoped>
.pull-container {
    width: 100%;
    min-height: 100px;
    margin: 20px 0 10px;
    box-sizing: border-box;
    overflow-y: scroll;
}
</style>
